<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>add</title>
    <style>
        .title {
            width: 120px;
        }

        .url {
            width: 200px;
        }

        .add-line {
            margin: 5px 0 0 80px;
            width: 200px;
        }

        .main {
            float: left;
            margin-left: 5%;
            width: 420px;
            text-align: center;
        }

        .out {
            float: left;
            /* margin: 10px 0 0 20%; */
            width: 50%;
            height: 90%;
            border: none;
            background-color: lightgrey;
            font-size: 11px;
        }

        .body {
            height: 99%;
        }
        .btn-area{
            position: absolute;
            top: 10px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="btn-area">
    <a href="">
        <button>刷新</button>
    </a><br/>
    <a href=".">
        <button>首页</button>
    </a>
</div>
    <div class="body">
        <main id="main" class="main">
            <div id="input"></div>
            <button class="add-line">新增一行</button>
            <button class="showJSON">输出</button>
        </main>
        <textarea id="out" class="out"></textarea>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="../js/main/main.data.js"></script>
    <script>
        selectDom = ''
        config.type.forEach(function (value) {
            selectDom += '<option value="' + value + '">' + value + '</option>'
        })
        var Num = 0
        var Total = 0

        function addLine() {
            Num++
            Total++
            $("#input").append('<select class="link-type" id="type' + Total + '">' + selectDom + '</select>' +
                '<input id="title' + Total + '" class="title"/><input id="url' + Total + '" class="url"/><br/>')
        }
        $(".add-line").on('click', function () {
            addLine()
        })


        var dict = new Array()

        function readInput() {
            for (var i = 1; i <= Total; i++) {
                dict['title' + i] = $("#title" + i).val()
                dict['type' + i] = $("#type" + i).val()
                dict['url' + i] = $("#url" + i).val()
                // console.log(dict['type'+i]+"|"+dict['title'+i]+"|"+dict['url'+i]+"total:"+Total)
            }
        }

        function appendJSON() {
            readInput()
            // JSON拼接
            temp = 'list={\n'
            for (var o in list) {
                temp += '  ' + o + ':[\n'
                if (typeof list[o] == 'object' && list[o] != null) {
                    for (var line in list[o]) {
                        temp += '    {"title":"' + list[o][line].title + '","url":"' + list[o][line].url + '"},\n';
                    }
                    // 因为定义了var,所以不是局部变量, 所以就不会有重复出现!!
                    for (var i = 1; i <= Num; i++) {
                        if (dict['type' + i] === o) {
                            temp += '    {"title":"' + dict['title' + i] + '","url":"' + dict['url' + i] + '"},\n';
                        }
                    }
                }
                temp += '],\n'
            }
            temp += '}'
            // console.log(temp)
            $("#out").val('')
            $("#out").val(temp)
        }
        $("#out").val('')
        $(".showJSON").on('click', function () {
            appendJSON()
        })
    </script>
</body>

</html>